<template>
<div>
   <el-drawer
    title="订单详情"
    :visible.sync="drawer"
    :size="size"
    :direction="direction"
    :before-close="handleClose">
     <div>
      <el-table  :data="tableData" border style="width:100%;" :header-cell-style="{backgroud:'#fafafa',color:'#333',textAlign:'center'}">
          <el-table-column prop="title" label="产品名称" width="180" align="center"></el-table-column>
          <el-table-column prop="price" label="价格" width="180" align="center"></el-table-column>
          <el-table-column prop="guige" label="规格" align="center"></el-table-column>
          <el-table-column prop="num" label="数量" align="center"></el-table-column>
          <el-table-column prop="sum" label="小计(元)" align="center"></el-table-column>
       </el-table>
     </div>
  </el-drawer>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name:"OrderDesc",
    data() {
      return {
        drawer: false,
        direction: 'rtl',
        tableData:[],
        size:'90%',
        menu:200,
        width:10,
      };
    },
    computed:{
      ...mapState(['isCollapse'])
    },
    mounted(){
      let width = document.documentElement.clientWidth;
      //let menuidth = document.querySelector('.menu').clientWidth;
      this.size = width - this.menu - 10 + 'px';
      this.width = width;
    },
    watch:{
      isCollapse(val){
        // let width = document.documentElement.clientWidth;
         val ? this.menu = 64 : this.menu = 200;
         this.size = this.width - this.menu - 10 + 'px';
      }
    },
    created(){
        
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      async getDetail(){
          let res = await this.$api.detail()
          this.tableData = res.data.data.list;
      }
    },
  };
</script>